<template>
    <div>
        <h1>{{ getTitle }}</h1>
        <div class="right">
            <el-button v-if="!getuser" type="success" @click="toLogin"
                >登录</el-button
            >
            <el-dropdown
                v-else
                split-button
                type="primary"
                plain
                @click="outLogin"
            >
                退出登录
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        >{{ getuser.username }},您好</el-dropdown-item
                    >
                    <el-dropdown-item>账户管理</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    computed: {
        ...Vuex.mapGetters({
            getuser: "user/getuser",
            getTitle: "getTitle",
        }),
    },
    methods: {
        toLogin() {
            this.$router.push("/login");
        },
        outLogin() {
            this.$confirm("是否确认退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "退出成功!",
                    });
                    localStorage.removeItem("user");
                    this.$router.push("/login");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消退出",
                    });
                });
        },
    },
};
</script>

<style scoped>
.right {
    position: absolute;
    right: 30px;
    bottom: 0px;
}
</style>
